<template>
  <div class="single-unit-maintenance-list-wrap">
    <div v-show="!detailView">
        <!-- 步骤说明 -->
        <div class="step-wrap">
            <div class="step-item-wrap">
                <div class="step-icon step-1"></div>
                <p class="step-name">第一步</p>
                <p class="step-desc">创建资产</p>
            </div>
            <div class="step-arrow"></div>
            <div class="step-item-wrap">
                <div class="step-icon step-2"></div>
                <p class="step-name">第二步</p>
                <p class="step-desc">选择维保标准</p>
            </div>
            <div class="step-arrow"></div>
            <div class="step-item-wrap">
                <div class="step-icon step-3"></div>
                <p class="step-name">第三步</p>
                <p class="step-desc">生成资产维保计划</p>
            </div>
            <div class="step-arrow"></div>
            <div class="step-item-wrap">
                <div class="step-icon step-4"></div>
                <p class="step-name">第四步</p>
                <p class="step-desc">系统定时推送维保任务</p>
            </div>
            <div class="step-arrow"></div>
            <div class="step-item-wrap">
                <div class="step-icon step-5"></div>
                <p class="step-name">第五步</p>
                <p class="step-desc">执行</p>
            </div>
            <div class="step-arrow"></div>
            <div class="step-item-wrap">
                <div class="step-icon step-6"></div>
                <p class="step-name">第六步</p>
                <p class="step-desc">统计、分析</p>
            </div>
        </div>
        <el-row type="flex" justify="space-between" class="serach-form-wrap">
            <el-form class="serach-form" ref="searchForm" :model="searchForm" :inline="true" @submit.native.prevent>
                <el-form-item v-if="hasFather">
                <div class="iconfont icon-return return-btn" @click="returnFun" title="返回">{{ organizationName }}</div>
                </el-form-item>
                <el-form-item>
                    <el-date-picker
                        v-model="searchForm.time"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="utils.intTimePickerOptions()"
                        @change="search">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                <!-- <tree-select
                    placeholder="请选择维保公司"
                    v-model="searchForm.companyId"
                    filterable
                    :width="200"
                    :data="maintenanceCoOptions"
                    :defaultProps="companyDefaultProps"
                    :checkedKeys="defaultCheckedCoId"
                    nodeKey="id">
                </tree-select> -->
                </el-form-item>
                <el-form-item>
                <el-button class="form-search-btn" type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
            <div class="more-btns" v-if="$store.state.buttonPermission[$store.state.currentTabName].indexOf('assetPlanManager') > -1">
                <el-button type="primary" @click="addNewPlan">新建计划</el-button>
                <el-button type="primary" @click="regeneratelan">重新生成</el-button>
            </div>
        </el-row>
        <el-table
            v-loading="loading"
            ref="singleUnitTotalTableList"
            :data="tableData"
            style="width: 100%">
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column label="年度维保计划" prop="name">
                <template slot-scope="scope">
                    <el-link class="maintain-standard" type="primary" @click="viewPlanDetail(scope.row)">{{scope.row.name}}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="维保类型" prop="maintainTypeNames"></el-table-column>
            <el-table-column label="维保公司" prop="maintainCompany" width="400"></el-table-column>
            <el-table-column label="维保标准" prop="maintainStandard"></el-table-column>
            <el-table-column label="状态" prop="status" width="200">
            <template slot-scope="scope">
                <div v-if="scope.row.status === 0" class="type-tags type-color-8">未开始</div>
                <div v-else-if="scope.row.status === 1" class="type-tags type-color-3">运行中</div>
                <div v-else-if="scope.row.status === 2" class="type-tags type-color-2">停用</div>
                <div v-else class="type-tags type-color-1">过期</div>
            </template>
            </el-table-column>
            <el-table-column label="计划开始日期" prop="startTime" width="150" :formatter="formatDateTime"></el-table-column>
            <el-table-column label="计划结束日期" prop="endTime" width="150" :formatter="formatDateTime"></el-table-column>
            <el-table-column label="操作" width="100" v-if="$store.state.buttonPermission[$store.state.currentTabName].indexOf('assetPlanManager') > -1">
            <template slot-scope="scope">
                <el-button v-if="scope.row.status == 2" type="text" @click="enablePlan(scope.row)" size="small">启用</el-button>
                <el-button v-else-if="scope.row.status == 1" @click="stopPlan(scope.row)" type="text" size="small">停用</el-button>
                <el-button v-else-if="scope.row.status == 0" type="text" @click="deletePlan(scope.row)" size="small">删除</el-button>
                <span v-else>-</span>
            </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
    <!-- 新建计划弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      title="新建维保计划"
      width="600px"
      top='10vh'
      v-if="dialogMaintenancePlan"
      :visible.sync="dialogMaintenancePlan"
      @close="closeNewPlan"
      v-dialogDrag>
        <maintenance-plan-form :organizationId="organizationId" :closeNewPlan="closeNewPlan"></maintenance-plan-form>
    </el-dialog>
    <transition name="el-zoom-in-top">
      <!-- 详细计划 -->
      <single-unit-maintenance-list v-if="detailView" :organizationId="organizationId" :planName="selectPlanName" :planId="selectPlanId" :returnFun="returnFather"></single-unit-maintenance-list>
    </transition>
  </div>
</template>

<script>
/* import TreeSelect from '@/libs/TreeSelect/Main' */
import maintenancePlanForm from '../Dialog/MaintenancePlanForm'
import { regenerateMaintainPlan } from '@/api/assets'
/* import { getMaintainOrgList } from '@/api/org' */
import { getPlanList, changePlanStatus, delPlan } from '@/api/maintence'
import utils from '@/utils/util'
import singleUnitMaintenanceList from './SingleUnitMaintenanceList'

export default {
  name:'SingleUnitMaintenanceList',
  components: { 
    /* TreeSelect, */
    maintenancePlanForm,
    singleUnitMaintenanceList
  },
  props: {
    organizationId: {
      required: true
    },
    organizationName: {
      default () {
        return ''
      }
    },
    hasFather: {
      type: Boolean,
      default () {
        return false
      }
    },
    returnFun: {
        type: Function,
        default () {
            return ()=>{}
        }
    }
  },
  data() {
    return {
      utils: utils,
      loading: true,
      dialogMaintenancePlan: false,
      searchForm: {
        time: '', // 计划时间
        companyId: 0, // 维保公司id
      },
      // 维保公司
      /* maintenanceCoOptions: [],
      companyDefaultProps: {
        children: 'nodes',
        label: 'name',
        value: 'id'
      },
      defaultCheckedCoId: [], */
      // 列表
      tableData: [],
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
      detailView: false,
      selectPlanId: '', // 选择查看的计划id
      selectPlanName: ''
    }
  },
  created() {
    // this.getMaintenanceCoList()
    this.getTableData()
  },
  methods: {
    // 获取维保公司下拉框数据
    /* getMaintenanceCoList() {
      let that = this
        getMaintainOrgList().then(res => {
            // 加上全部
            res.data.unshift({
                id: 0,
                name: '全部维保公司'
            })
            that.maintenanceCoOptions = res.data
            // 默认选择全部
            that.$nextTick(() => {
                that.defaultCheckedCoId.push(0)
            })
        })
    }, */
    // 获取列表数据
    getTableData(pageIndex, pageSize, isStatus) {
      let that = this
      that.loading = true
      if (pageIndex) {
        that.currentPage = pageIndex
      }
      if (pageSize) {
        that.pageSize = pageSize
      }
      let parames = {
        startTime: this.searchForm.time && this.searchForm.time.length > 0 ? this.searchForm.time[0] + ' 00:00:00' : '',
        endTime: this.searchForm.time && this.searchForm.time.length > 0 ? this.searchForm.time[1] + ' 23:59:59' : '',
        orgIds: that.organizationId,
        companyId: that.searchForm.companyId || 0,
        queryType: 1,
        pageSize: that.pageSize,
        pageIndex: that.currentPage - 1
      }
      getPlanList(parames).then(res => {
        that.tableData = res.data
        that.total = res.total
        that.loading = false
      })
    },
    handleSizeChange(pageSize) {
      this.getTableData(1, pageSize, true)
    },
    handleCurrentChange(currentPage) {
      this.getTableData(currentPage, this.pageSize, true)
    },
    formatDateTime(row, column, cellValue, index) {
      if(cellValue) {
        return utils.ilinkTimeformat.format(new Date(cellValue), 'yyyy-MM-dd')
      } else {
        return '-'
      }
    },
    // 查询
    search() {
      this.getTableData(1)
    },
    // 新建计划
    addNewPlan() {
        this.dialogMaintenancePlan = true
    },
    closeNewPlan(flag) {
        this.dialogMaintenancePlan = false
        if(typeof(flag) !== 'object' && flag) {
          this.search()
        }
    },
    // 重新生成计划
    regeneratelan() {
      let that = this
      that.$confirm('1、系统会自动检索新的消防系统与资产类别，然后重新生成维保计划，并且保持计划周期不变。<br/>2、系统只会更新运行中和未开始的年度维保计划。', '提示', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '重新生成',
        cancelButtonText: '取消',
        type: 'warning',
        roundButton: true
      }).then(() => {
        // 调接口
        regenerateMaintainPlan({
          orgId: that.organizationId,
        }).then(res => {
          if(res.status === 200) {
            that.$message({
              type: 'success',
              message: '重新生成成功!'
            })
            // 刷新
            that.search()
          } else {
            that.$message({
              type: 'warning',
              message: res.info
            })
          }
        })
      }).catch(() => {})
    },
    // 启用
    enablePlan(row) {
      // 阻止事件冒泡
      event.stopPropagation()
      let that = this
      if (row) {
        this.$confirm('重新启用计划后，中间间隔时间的维保任务不会生成，从现在开始之后的维保任务按计划继续生成。', '提示', {
          confirmButtonText: '启用',
          cancelButtonText: '取消',
          type: 'warning',
          roundButton: true
        }).then(() => {
          changePlanStatus({
            planId: row.id,
            status: 1
          }).then(res => {
            if( res.status === 200) {
              that.$message({
                type: 'success',
                message: '启用成功!'
              })
              setTimeout(() => {
                this.currentPage = 0
                that.getTableData()
              }, 1000)
            } else {
              this.$message({
                type: 'warning',
                message: res.info
              })
            }
          })
          // 阻止事件冒泡
          event.stopPropagation()
        }).catch(() => {
          // this.$message({
          //     type: 'info',
          //     message: '已取消'
          // })
        })
      }
    },
    // 停用
    stopPlan(row) {
      // 阻止事件冒泡
      event.stopPropagation()
      let that = this
      if (row) {
        this.$confirm('停用计划后，即不会生成新的维保任务。但之前的维保任务会继续执行。', '提示', {
          confirmButtonText: '停用',
          cancelButtonText: '取消',
          type: 'warning',
          roundButton: true
        }).then(() => {
          changePlanStatus({
            planId: row.id,
            status: 2
          }).then(res => {
            if( res.status === 200) {
              that.$message({
                type: 'success',
                message: '停用成功!'
              })
              setTimeout(() => {
                this.currentPage = 0
                that.getTableData()
              }, 1000)
            } else {
              this.$message({
                type: 'warning',
                message: res.info
              })
            }
          })
          // 阻止事件冒泡
          event.stopPropagation()
        }).catch(() => {
        })
      }
    },
    // 删除
    deletePlan(row) {
      // 阻止事件冒泡
      event.stopPropagation()
      let that = this
      if (row) {
        this.$confirm('确认删除该计划吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          roundButton: true
        }).then(() => {
          delPlan({
            planId: row.id
          }).then(res => {
            if( res.status === 200) {
              that.$message({
                type: 'success',
                message: '删除成功!'
              })
              setTimeout(() => {
                this.currentPage = 0
                that.getTableData()
              }, 1000)
            } else {
              this.$message({
                type: 'warning',
                message: res.info
              })
            }
          })
          // 阻止事件冒泡
          event.stopPropagation()
        }).catch(() => {
        })
      }
    },
    // 查看明细
    viewPlanDetail(row) {
        if(row.id) {
            this.selectPlanId = row.id
            this.selectPlanName = row.name || ''
            this.detailView = true
        }
    },
    returnFather() {
      this.detailView = false
      this.getTableData(1)
    }
  },
  watch: {
    companyIdSelect(val, oldVal) {
      if(val && val !== oldVal) {
        this.search()
      }
    }
  },
  computed: { 
    companyIdSelect() {
      return this.searchForm.companyId
    }
  }
}
</script>
<style lang="scss">
.single-unit-maintenance-list-wrap {
    .step-wrap {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 20px 0;
        border: 1px solid #eaeaea;
        padding: 30px;
        // .el-step__description {
        //     font-size: 14px;
        // }
       .step-item-wrap {
          width: 150px;
          text-align: center;
         .step-icon {
          margin: 0 auto;
          width: 64px;
          height: 65px;
          background: url(../../../assets/images/home/step-flow.png) 0 0 no-repeat;
         }
         .step-desc {
           color: #999;
         }
         .step-4 {
            background-position: -0px -0px;
          }

          .step-6 {
            background-position: -64px -0px;
          }

          .step-1 {
            background-position: -128px -0px;
          }

          .step-2 {
            background-position: -193px -0px;
          }

          .step-3 {
            background-position: -258px -0px;
          }

          .step-5 {
            background-position: -323px -0px;
          }
       }
      .step-arrow {
        width: 21px;
        height: 13px;
        background: url(../../../assets/images/home/step-flow.png) 0 0 no-repeat;
        background-position: -388px -0px;
      }
    }
    .serach-form-wrap {
        .el-form-item {
            margin-bottom: 0;
        }
        .small-select {
            .el-form-item__content {
                width: 120px;
            }
        }
    } 
    .more-btns {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;
        padding-right: 20px;
        .el-dropdown {
            padding: 0 10px;
            height: 38px;
            line-height: 38px;
            border: 1px solid #409EFF;
            border-radius: 3px;
        }
    }
    .maintain-standard {
      width: 100%;
      .el-link--inner {
        width: 100%;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
    }
    .maintenance-standard-detail {
        margin-bottom: 25px;
        p {
            line-height: 28px;
            margin-bottom: 15px;
        }
    }
}

</style>
